<template>
  <div class="address-list" :class="{ bg: addessList.length == 0 }">
    <ul v-if="addessList.length != 0">
      <li
        v-for="(item, index) in addessList"
        :key="index"
        @click="swiperSrc1($event, item.id)"
      >
        <div class="top">
          {{
            item.consigneeProvince +
              item.consigneeCity +
              item.consigneeRegion +
              item.subDistrict +
              "街道" +
              item.communityName +
              item.villageName +
              item.address
          }}
        </div>
        <div class="middle">
          <span
            ><img
              @click="swiperSrc($event, item.id)"
              data-state="1"
              src="../assets/img/未选中@2x.png"
              alt=""
          /></span>
          <span></span>
        </div>
        <div class="bottom">
          <button @click.stop="deleteAddress(item.id)">删除</button>
          <button @click.stop="editAddress(item.id)">编辑</button>
        </div>
      </li>
    </ul>
    <div class="btn">
      <button @click="addAddress">新增地址</button>
    </div>
    <span class="after" v-if="addessList.length == 0">暂无地址记录</span>
  </div>
</template>
<script>
import { openid } from "../config";
export default {
  name: "AddressList",
  data() {
    return {
      addessList: [{}],
    };
  },
  created() {
    // 获取所有地址
    this.getAddressList();
  },
  methods: {
    getAddressList() {
      this.$axios
        .get("/wx/recycleAddress/list", {
          params: {
            openid,
          },
        })
        .then(({ data: res }) => {
          console.log("109", res);
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500,
            });
          }
          this.addessList = res.data;
        })
        .catch(() => {});
    },
    // 编辑地址
    editAddress(id) {
      // 根据id编辑
      this.$router.push({
        path: "/add-address",
        query: {
          id: id,
          a: "edit",
        },
      });
    },
    succCallback(id) {
      this.$axios
        .delete("/wx/recycleAddress", {
          data: [id],
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500,
            });
          }
          this.$toast({
            message: "删除成功",
            position: "middle",
            duration: 1500,
          });
          this.getAddressList();
        })
        .catch(() => {});
    },
    // 删除地址
    deleteAddress(id) {
      this.$messagebox({
        title: "提示",
        message: "确定要删除吗?",
        showCancelButton: true,
      }).then((action) => {
        if (action == "confirm") {
          //确认的回调
          this.succCallback(id);
        }
      });
    },
    swiperSrc1(e, id) {
      this.$router.replace({
        path: "/online-booking",
        query: {
          id,
        },
      });
    },
    swiperSrc(e, id) {
      // 修改图标状态
      var target = e.target || e.srcElement;
      console.dir(target.dataset.state);
      if (target.dataset.state == 1) {
        target.src = require("../assets/img/选中@2x.png");
        target.dataset.state = 0;
      } else if (target.dataset.state == 0) {
        target.src = require("../assets/img/未选中@2x.png");
        target.dataset.state = 1;
      }

      for (var item of this.getAllSibling(
        target.parentElement.parentElement.parentElement
      )) {
        item.children[1].children[0].children[0].src = require("../assets/img/未选中@2x.png");
        item.children[1].children[0].children[0].dataset.state = 1;
      }

      console.log(e, id);
      this.$router.replace({
        path: "/online-booking",
        query: {
          id,
        },
      });
    },
    getAllSibling(ele) {
      //定义一个新数组，装所有的兄弟元素，将来返回
      var newArr = [];
      var arr = ele.parentNode.children;
      for (var i = 0; i < arr.length; i++) {
        //判断，如果不是传递过来的元素本身，那么添加到新数组中。
        if (arr[i] !== ele) {
          newArr.push(arr[i]);
          // newArr[newArr.length]=arr[i];
        }
      }
      return newArr;
    },
    // 新增地址
    addAddress() {
      this.$router.push({
        path: "/add-address",
        query: {
          a: "add",
        },
      });
    },
  },
  watch: {
    "$route.path": function(newPath, oldPath) {
      if (newPath == "/address-list" && oldPath == "/add-address") {
        this.getAddressList();
      } else if (newPath == "/address-list" && oldPath == "/online-booking") {
        this.getAddressList();
      }
      console.log(newPath, oldPath);
    },
  },
};
</script>
<style lang="scss" scoped>
.address-list {
  width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;
  padding: 0.9375rem /* 15/16 */ 0.9375rem /* 15/16 */ 3.75rem /* 60/16 */;
  box-sizing: border-box;
  &.bg {
    background-image: url("../assets/img/地址为空@2x.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  position: relative;
  .after {
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, 0);
    width: auto;
    height: auto;
    color: #666;
    font-size: 1.25rem /* 20/16 */;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      width: 100%;
      min-height: 5.9375rem /* 95/16 */;
      margin-bottom: 0.625rem /* 10/16 */;
      background: #fff;
      border-radius: 0.625rem /* 10/16 */;
      box-sizing: border-box;
      padding-right: 1.3125rem /* 21/16 */;
      div {
        &.top {
          color: #333333;
          font-size: 15px;
          font-weight: bold;
          padding-left: 3.5rem /* 56/16 */;
          padding-top: 1.40625rem /* 22.5/16 */;
          box-sizing: border-box;
        }
        &.middle {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 0.6875rem /* 11/16 */;
          span {
            &:first-of-type {
              display: inline-block;
              width: 1.4375rem /* 23/16 */;
              height: 1.4375rem /* 23/16 */;
              img {
                width: 100%;
                height: 100%;
              }
              //   vertical-align: middle;
            }
            &:nth-of-type(2) {
              display: inline-block;
              width: calc(100% - 3.5rem /* 56/16 */);
              height: 0;
              border-bottom: 1px solid #dddddd;
              box-sizing: border-box;
              //   vertical-align: middle;
            }
          }
        }
        &.bottom {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          padding-right: 0.75rem /* 12/16 */;
          box-sizing: border-box;
          height: 2.5rem /* 40/16 */;
          line-height: 2.5rem /* 40/16 */;
          button {
            border: 0;
            outline: none;
            margin-left: 0.3125rem /* 5/16 */;
            background-color: #fff;
            border: 0.5px solid #000;
            border-radius: 0.3125rem /* 5/16 */;
            // width: 2.375rem /* 38/16 */;
            width: auto;
            height: 1.34375rem /* 21.5/16 */;
            line-height: 1.34375rem;
            text-align: center;
            font-size: 12px;
            color: #333333;
            font-weight: bold;
          }
        }
      }
    }
  }
  position: relative;
  .btn {
    width: 100vw;
    height: 3.75rem /* 60/16 */;
    line-height: 3.75rem /* 60/16 */;
    background-color: #fff;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0px;
    button {
      border: none;
      outline: none;
      width: 21.25rem /* 340/16 */;
      height: 2.5rem /* 40/16 */;
      line-height: 2.5rem;
      text-align: center;
      border-radius: 1.25rem /* 20/16 */;
      color: #fff;
      background-color: #3ba32a;
      font-size: 15px;
      font-weight: bold;
    }
  }
}
</style>
